<template>
    <div class="header-box">
        <el-dropdown trigger="click" @command="toPage">
            <span class="el-dropdown-link">
                <img class="icon" src="@/assets/img/theme-icon.png" alt="" />
                <div class="title-box">
                    {{ title }}
                </div>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="Home">首页</el-dropdown-item>
                    <el-dropdown-item command="BlogClassfiy">分类</el-dropdown-item>
                    <el-dropdown-item command="About">关于</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'

name: "MobileHeader";
const router = useRouter();
const title = ref('菜单')
const toPage = (name: string) => {
    router.push({ path: name });
}
</script>

<style lang="less" scoped>
@import url(@/assets/css/globalColor.less);

.header-box {
    height: 45px;
    background-color: @theme-color;
    display: none;
    align-items: center;

    .el-dropdown-link {
        display: flex;
        // justify-content: center;
        align-items: center;

        .title-box {
            margin-left: 10px;
        }

        img {
            width: 30px;
            height: 30px;
        }
        .el-icon {
            top: 0;
        }
    }


    .el-icon {
        top: 0.2em;
    }

    span {
        margin-left: 15px;
        font-size: 18px;
        color: #fff
    }

}

@media screen and (max-width: 1200px) {
    .header-box {
        display: flex;
    }

    :deep(.el-dropdown-menu__item) {
        padding: 10px 40px;
    }

    :deep(.el-popper) {
        inset: 44.5px auto auto 8px;
    }

}
</style>